<template>
  <div>
    <div class="data-one-row">
      <div class="title-header">商品时间记录详情(可能会出现重复数据)</div>
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="商品编码" prop="goodsId">
          <el-input
            v-model="queryParams.goodsId"
            placeholder="请输入商品编码"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="goodsTimeList">
        <el-table-column label="商品编码" align="center" prop="goodsId" />
        <el-table-column label="型号" align="center" prop="goodsName" />
        <el-table-column label="收货时间" align="center" prop="collectTime" />
        <el-table-column label="生成时间" align="center" prop="createTime" />
        <el-table-column label="验机时间" align="center" prop="testTime" />
        <el-table-column label="步骤" align="center" prop="stepType" :formatter="stepTypeFormatter" />
        <el-table-column label="步骤开始时间" align="center" prop="stepCreateTime" />
        <el-table-column label="步骤接收时间" align="center" prop="stepUpdateTime" />
        <el-table-column label="账单创建时间" align="center" prop="billCreateTime" />
        <el-table-column label="账单修改时间" align="center" prop="billUpdateTime" />
      </el-table>
    </div>

    <div class="data-one-row">
      <div class="title-header">去重复数据列表</div>
      <el-table v-loading="loading" :data="goodsOnlyList">
        <el-table-column label="商品编码" align="center" prop="goodsId" />
        <el-table-column label="型号" align="center" prop="goodsName" />
        <el-table-column label="收货时间" align="center" prop="collectTime" />
        <el-table-column label="生成时间" align="center" prop="createTime" />
        <el-table-column label="验机时间" align="center" prop="testTime" />
        <el-table-column label="步骤" align="center" width="300">
          <template v-slot="scope">
            <div>
              <div v-for="s in scope.row.stepList">
                <span>{{stepTypeFormatter(s)}}</span>
                <div>
                  {{parseTime(new Date(s.createTime), '{y}-{m}-{d} {h}:{i}:{s}')}}
                </div>
                <div>
                  {{parseTime(new Date(s.updateTime), '{y}-{m}-{d} {h}:{i}:{s}')}}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="账单" align="center">
          <template v-slot="scope">
            <div>
              <div v-for="b in scope.row.billList">
                <div>
                  {{parseTime(new Date(b.createTime), '{y}-{m}-{d} {h}:{i}:{s}')}}
                </div>
                <div>
                  {{parseTime(new Date(b.updateTime), '{y}-{m}-{d} {h}:{i}:{s}')}}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="data-one-row">
      <div class="title-header">条件导出数据</div>
      <el-form :model="exportParams" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="回收时间" prop="collectTimeArr">
          <el-date-picker
            v-model="exportParams.collectTimeArr"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="collectTimeChange"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="生成时间" prop="createTimeArr">
          <el-date-picker
            v-model="exportParams.createTimeArr"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="collectTimeChange"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {goodsTimeDataList, goodsOnlyList, exportGoodsTime} from "@/api/recovery/data/goodsTimeData"
export default {
  name: "goods-time",
  data() {
    return {
      loading: false,
      queryParams: {
        goodsId: null
      },
      exportParams: {
        collectTimeArr: null,
        createTimeArr: null,
        params: {}
      },
      goodsTimeList: [],
      goodsOnlyList: [],
    }
  },
  created() {
    this.getGoodsTimeList();
  },
  methods: {
    collectTimeChange(e) {
      if(e) {
        this.$set(this.exportParams.params, "collectStartTime", e[0]);
        this.$set(this.exportParams.params, "collectEndTime", e[1]);
      }else {
        this.$delete(this.exportParams.params, "collectStartTime");
        this.$delete(this.exportParams.params, "collectEndTime");
      }
    },
    createTimeChange(e) {
      if(e) {
        this.$set(this.exportParams.params, "createStartTime", e[0]);
        this.$set(this.exportParams.params, "createEndTime", e[1]);
      }else {
        this.$delete(this.exportParams.params, "createStartTime");
        this.$delete(this.exportParams.params, "createEndTime");
      }
    } ,
    handleExport() {
      if(this.exportParams.createTimeArr == null && this.exportParams.collectTimeArr == null) {
        this.msgError("必须选择一个筛选条件！");
        return
      }
      exportGoodsTime(this.exportParams).then(res => {
        this.download(res.msg)
      })
    },
    /** 步骤 */
    stepTypeFormatter(row) {
      switch (row.stepType) {
        case 1 : return "移交待验机";
        case 2 : return "移交待报价";
        case 3 : return "移交待入库";
        case 4 : return "驳回验机";
        case 5 : return "驳回报价";
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if(this.queryParams.goodsId == null || this.queryParams.goodsId === '') {
        this.msgError("请输入商品编码");
        return
      }
      this.getGoodsTimeList();
      this.getGoodsOnlyList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getGoodsTimeList() {
      goodsTimeDataList(this.queryParams).then(res => {
        this.goodsTimeList = res.rows;
        this.msgSuccess("操作成功！")
      })
    },
    getGoodsOnlyList() {
      goodsOnlyList(this.queryParams).then(res => {
        this.goodsOnlyList = res.rows;
      })
    },
  },
  /** 创建前*/
  beforeCreate() {
    this.$nextTick(() => {
      document.body.setAttribute('style', 'background-color: #F2F6FC')
    })
  },
  /** 销毁前*/
  beforeDestroy() {
    this.$nextTick(() => {
      document.body.setAttribute('style', '');
    })
  }
}
</script>

<style scoped>
 .data-one-row{
   margin: 20px;
   background-color: #FFFFFF;
   padding: 10px;
 }
  .title-header {
    margin-bottom: 15px;
    color: #5a5e66;
    font-weight: 600
  }
</style>
